import React, { useEffect, useRef } from'react';
import BaseThree from '@/three2';
// import * as THREE from 'three';
// import TSL from 'three/tsl';


class InitThree extends BaseThree {
  constructor(container: HTMLDivElement) {
    super(container, {renderer: {
      type: 'webgpu'
    }});
    this.scene.add(this.box())

    // this.showCameraPos()

  }
}

const HomePage: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null!);

  useEffect(() => {
    new InitThree(ref.current);

  }, []);
  
  return (
      <div className='full bg-slate-500' ref={ref}>
        <h1 className="text-red-400">测试。。。</h1>
      </div>
    
  );
};

export default HomePage;
